import { ref, onUnmounted } from 'vue'

export default function () {
    let startTime = -1 // 记录动画开始的时间戳
    let nowFrame = ref(0) // 记录当前的帧数
    /**
     * 判断给定的帧数是否在可以挂载的范围内
     *
     * @param frame: 要判断的帧数
     * @returns 返回一个布尔值，表示给定帧数是否在当前帧数之前
     */
    const canMounted = (frame: number) => {
        return frame < nowFrame.value
    }

    let raf: number | null = null // 用于存储requestAnimationFrame的ID
    /**
     * 该回调函数被requestAnimationFrame调用，用于更新当前帧数并重新调度自身
     *
     * @param time: 当前时间戳
     */
    const rafCb = (time: number) => {
        // 如果时间是1000的整数倍，打印时间
        if (Math.abs(time % 1000) < 10) console.log(time)

        // 如果startTime未被初始化，则设置为当前时间
        if (startTime < 0) startTime = time
        // 更新当前帧数为相对于开始时间的时间差
        nowFrame.value = time - startTime
        // 请求下一个动画帧调用rafCb
        raf = requestAnimationFrame(rafCb)
    }
    // 初始调用requestAnimationFrame，启动动画帧循环
    raf = requestAnimationFrame(rafCb)

    // 组件卸载时取消动画帧请求
    onUnmounted(() => {
        if (raf) cancelAnimationFrame(raf)
    })
    // 返回相关数据和函数
    return {
        startTime,
        nowFrame,
        canMounted,
    }
}
